<template>
    <view class="lianxi">

        <view class="ddd">
            <u-modal :show="isModalShow" @close="closeModal" margin-top="200px">
                <view style="font-weight: bold;">退出确认</view>
                <view style="margin-top: 30px;">资料尚未保存，是否取消编辑?</view>
                <view class="sure" @click="sure">确认</view>
            </u-modal>
            <view class="open-modal-btn" @click="showModal" style="color: blue;">取消</view>

        </view>
        <view class="xin">新建订单</view>
        <u-popup :show="show" mode="center" @close="close">
            <view>
                <view><img src="/static/img/dui.png" alt="" style="width: 30px; height: 30px; margin-top: 8px;"></view>
                <text @click="open">保存成功</text>
            </view>
        </u-popup>
        <view @click="show = true" style="color: blue;">保存</view>
    </view>
    <view class="one">
        <view class="a">
            <input type="text" placeholder="输入订单标题">
        </view>
        <view class="two">
            <li class="two_z">
                <p>
                    共联客户 <span style="color: red;">*</span>
                </p>
                <p style="color: #ccc;" @click="kehu">点击选择 &gt; </p>
            </li>
            <li class="two_z">
                <p>
                    共联商机
                </p>
                <p style="color: #ccc;" @click="kehu">点击选择 &gt; </p>
            </li>
            <li class="two_z">
                <p>
                    共联产品
                </p>
                <p style=" display: flex;"  @click="tianjia">已添加产品记录 <a href="" style="color: blue;">10条</a>  &gt; </p>
            </li>
            <li class="two_z">
                <p>
                    订单总金额（元）<span style="color: red;">*</span>
                </p>
                <p style="color: #ccc;">10,000.00</p>
            </li>
            <li class="two_z">
                <p>
                    签单日期
                </p>
                <p style="color: #ccc;" @click="sheng">点击选择 &gt; </p>
            </li>
            <li class="two_z">
                <p>
                    执行开始日期
                </p>
                <p style="color: #ccc;" @click="sheng">点击选择 &gt; </p>
            </li>

            <li class="two_z">
                <p>
                    执行结束日期
                </p>
                <p style="color: #ccc;" @click="sheng">点击选择 &gt; </p>
            </li>

            <li class="two_z">
                <p>
                    客户签约人
                </p>
                <p>

                    <input type="text" placeholder="点击填写" style="  width: 80px;">
                </p>
            </li>
            <li class="two_z">
                <p>
                    我方签约人
                </p>
                <p>

                    <input type="text" placeholder="点击填写" style="  width: 80px;">
                </p>
            </li>
            <li class="two_z">
                <p>
                    付款方式
                </p>
                <p style="color: #ccc;" @click="fukuan">点击选择 &gt; </p>
            </li>
            <li class="two_z">
                <p>
                    归属人员<span style="color: red;">*</span>
                </p>
                <p @click="guishu">
                    <img src="/static/img/11.png" alt="" style="width: 30px; height: 30px; vertical-align: middle;">
                    <span>赵小刚 <span style="color: #ccc;"> &gt;</span> </span>

                </p>
            </li>
            <li class="two_zz">
                <p style="margin-left: 15px; margin-top: 15px;">
                    备注信息
                </p>
                <p style="color: #ccc;"> <input type="text" placeholder="请输入备注信息"
                        style="margin-top: 20px; margin-left: 30px;"></p>
            </li>
        </view>
        <view class="two">

            <p style=" width: 375px;height: 40px; background-color: #fff;">提醒谁看</p>
            <li class="shuikan">
                <view>

                    <img src="/static/img/23.png" alt="" style="width: 20px;height: 20px;" class="gouzi">
                    <img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;">
                    <p>赵小刚</p>
                </view>
                <view>
                    <img src="/static/img/23.png" alt="" style="width: 20px;height: 20px;" class="gouzi1">
                    <img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;">
                    <p>周小明</p>
                </view>
                <view>
                    <img src="/static/img/23.png" alt="" style="width: 20px;height: 20px;" class="gouzi2">
                    <img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;">
                    <p>郭小涛</p>
                </view>
                <view>
                    <img src="/static/img/23.png" alt="" style="width: 20px;height: 20px;" class="gouzi3">
                    <img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;">
                    <p>张小伟</p>
                </view>
                <view @click="haoduo">
                    <button style="width: 40px; height: 40px; border-radius: 50%; border: 1px solid #ccc;">+</button>
                    <p style="margin-top: 4px;">更多</p>
                </view>
            </li>



            <li style="border: 1px solid #ccc; color: #666;">
                <p style="margin-left: 30px; margin-top: 20px;">注:审批完成后，将自动通知到所选人员。</p>
                <p style="margin-left: 30px; margin-top: 20px;">跟进任务</p>

            </li>



            <li class="two_z">
                <p>
                    创建下次跟进任务
                </p>
                <p>

                    <u-switch v-model="value13" asyncChange @change="asyncChange"></u-switch>
                </p>
            </li>
            <view @click="asyncChange" v-for="(item, index) in list" :key="index">

                <li class="two_z">
                    <p>
                        {{ item.name }}<span style="color: red;">*</span>
                    </p>
                    <p>
                    <p style="color: #ccc;" @click="shijian"> 点击选择 &gt; </p>

                    </p>
                </li>
                <li class="two_z">
                    <p>
                        跟进内容
                    </p>
                    <p>

                        <input type="text" placeholder="点击填写" style="  width: 80px;">
                    </p>
                </li>
                <li class="two_z">
                    <p>
                        跟进人员<span style="color: red;">*</span>
                    </p>
                    <p>
                        <img src="/static/img/11.png" alt="" style="width: 30px; height: 30px; vertical-align: middle;">
                        <span>赵小刚 <span style="color: #ccc;"> &gt;</span> </span>

                    </p>
                </li>
                <li class="two_z">
                    <p>
                        任务提醒
                    </p>
                    <p>
                    <p style="color: #ccc;" @click="tixing">点击选择 &gt; </p>

                    </p>
                </li>
                <li class="two_z">
                    <p>
                        提醒方式<span style="color: red;">*</span>
                    </p>
                    <p>
                    <p style="color: #ccc;" @click="fangshi">点击选择 &gt; </p>

                    </p>
                </li>
                <li style="height: 100px; margin-top: 30px;">

                    <u-popup :show="show" mode="center" @close="close">
                        <view>
                            <view><img src="/static/img/dui.png" alt="" style="width: 30px; height: 30px; margin-top: 8px;">
                            </view>
                            <text @click="open">保存成功</text>
                        </view>
                    </u-popup>
                    <u-button @click="show = true" type="primary" text="保存订单"></u-button>
                </li>

            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from "vue";

const isModalShow = ref(false)
const showModal = () => {
    isModalShow.value = true
}
const closeModal = () => {
    isModalShow.value = false
}


const show = ref(false)
const open = () => {
    show.value = false
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaogongsi'
    })
}

const close = () => {
    show.value = false
}

const value13 = ref('');
const asyncChange = () => {
    value13.value = ''
}
const list = ref([
    { id: 0, name: "跟进时间", a: "点击选择", }
])
const kehu = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaokehu'
    })
}
const fukuan = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaofukuan'
    })
}

const sheng = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaoshengri'
    })
}
const shijian = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaoshengri'
    })
}

const tixing = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaotixing'
    })
}
const fangshi = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaofangshi'
    })
}
const sure = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaogongsi'
    })
}
const guishu = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaoguishu'
    })
}
const haoduo = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaohaoduo'
    })
}
const tianjia = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaotianjiachanpin'
    })
}

</script>

<style lang="scss">
.gouzi {
    position: absolute;
    left: 40px;
    top: -15px;

}

.gouzi1 {
    position: absolute;
    left: 110px;
    top: -15px;

}

.gouzi2 {
    position: absolute;
    left: 180px;
    top: -15px;

}

.gouzi3 {
    position: absolute;
    left: 250px;
    top: -15px;

}

.shuikan {
    display: flex;
    background-color: #fff;
    height: 100px;
    text-align: center;
    position: relative;

    view {
        width: 70px;
    }
}

.xin {
    margin-left: 100px;
}

.u-popup__content {
    height: 100px;
    text-align: center;
    border-radius: 10px;
    line-height: 50px;
}

.ddd {
    position: relative;
}

.sure {
    position: absolute;
    top: 150px;
    color: blue;
    // z-index: 999;
}

.u-modal__content {
    height: 100px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;


}

.u-modal {
    z-index: 99;
    position: fixed;
    top: 150px;
    left: 30px;
    background-color: white;
}

.confirm-btn {
    padding: 10px 20px;
    background-color: #1c94e0;
    color: #fff;
    border-radius: 5px;
}

.two_zz {
    height: 200px;
    background-color: white;
    border: 1px solid #ccc;
}

.two {
    margin-top: 20px;
}

.two_z {
    display: flex;
    justify-content: space-between;
    padding: 10px 10px;
    border: 1px solid #ccc;
    height: 25px;
    background-color: white;

}

.a {
    input {
        height: 40px;
        border: 1px solid #ccc;
        width: 360px;
        margin-top: 30px;
        background-color: white;
    }
}

.lianxi {
    width: 330px;
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    padding: 3px 20px;
    position: fixed;
    height: 40px;
    background-color: white;
    top: 0px;
    left: 0px;
}

.one {
    height: 1200px;
    background-color: rgb(238, 238, 238);
    margin-top: 80px;
    width: 360px;
    margin-left: 8px;
    border: 1px solid #ccc;
}
</style>